<template>
	<!-- 拼团成员详情 -->
	<view>
		<view class="group-state-content">
			<view class="group-state-msg">
				<view class="group-state-msg-left">
					<view class="">
						<image :src="group_msg.user_info.avatar" mode=""></image>
						<view class="">
							团长
						</view>
					</view>
					<text>{{group_msg.user_info.nickname}}</text>
				</view>
				<view class="group-state-msg-right">
					开团时间：<text>{{group_msg.date_added || formatDates}}</text>
				</view>
			</view>
			<view class="group-state-details">
				<view class="group-state-details-top">
					<view class="group-state-title-details">
						拼团情况
					</view>
					<view class="">
						{{groupState}}
					</view>
				</view>
				<view class="group-state-details-bottom">
					<view class="course-statistics-details">
						<view class="" style="color: #FF391F;">{{group_msg.group_people.count}}<text style="font-size: 28upx;color: #333333;">/{{groupDetailsMsg.groupTotal}}</text></view>
						<view class="lack" style="width: 122upx;" v-if="groupState=='拼团完成'">
							虚拟人数:{{ group_msg.group_people.inventedPeople }}
						</view>
						<view class="">本团成员(人)</view>
					</view>
					<view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{group_msg.group_people.sumCourse}}</view>
						<view class="">报名课程(个)</view>
					</view>
					<view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">¥{{group_msg.group_people.sumMoney}}</view>
						<view class="">目前成交金额(元)</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
				<view class="group-state-invite" v-if="options.group_status == 'on'" @click="getStore">
					邀请新用户参团
				</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
				<button class="group-state-invite" style="padding: 0;" v-if="options.group_status == 'on'">
					邀请新用户参团
				</button>
			<!-- #endif -->
		</view>
		<view class="act-course-content" v-for="item in groupMember" :key='item.assemble_id'>
			<view class="group-state-msg">
				<view class="group-state-msg-left">
					<view class="">
						<image :src="item.user_info.avatar" mode=""></image>
						<view class="" v-if="item.regimental == '团长'">
							团长
						</view>
					</view>
					<text>{{item.user_info.nickname}}</text>
				</view>
				<view class="group-state-msg-right">
					下单时间：<text v-if="item.order">{{item.order.date_added}}</text>
				</view>
			</view>
			<view class="act-course-phone">
				<view class="" v-if="item.order">
					电话：{{item.order.customer_telephone}}
				</view>
				<view v-if="item.order" class="" @click="callPhone(item.order.customer_telephone)">
					拨打电话
				</view>
			</view>
			<view class="act-course-details">
				<view class="act-course-details-title">
					<text>课程名称</text>
					<text>数量</text>
					<text>优惠</text>
					<text>金额</text>
				</view>
				<view class="act-course-details-common" v-for="(info,index) in item.course" :key='index'>
					<text>{{info.activity_course_title}}</text>
					<text style="margin-left: 28upx;">{{info.quantity}}</text>
					<text v-if="parseInt(info.price.origin_price) - parseInt(info.price.group_purchase_price)!=0">
						￥{{parseInt(info.price.origin_price) - parseInt(info.price.group_purchase_price)}}
					</text>
					<text v-else>赠送</text>
					<text>￥{{info.price.group_purchase_price}}</text>
				</view>
			</view>
			<view class="give-content">
				<view class="act-course-details-title" style="justify-content: space-between;">
					<text>赠品名称</text>
					<text>赠送购物卡金额</text>
				</view>
				<view class="give-content-details">
					<text>小鱼购物卡</text>
					<text>¥{{item.order.shopping_card_amount}}</text>
				</view>
			</view>
			<view class="act-course-salesman">
				<view class="act-course-salesman-img">
					<image :src="item.share_employee.avatar" mode=""></image>
					<text>{{item.share_employee.nickname}}</text>
					<view class="">
						业务员
					</view>
				</view>
				<view class="adjust-succed"  v-if="options.group_status == 'fail'" @click="changeOn(item)">
					调整为成功订单
				</view>
			</view>
			<view class="group-bad" v-if="options.group_status == 'fail'">
				* 拼团失败，系统自动退款，请联系家长
			</view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{uniPopup},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				actCourseHeader:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'',money:'¥168.00'},
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'-¥30.0',money:'¥168.00'},
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'赠送',money:'¥168.00'},
				],
				actCourseMember:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'',money:'¥168.00'},
				],
				store_id:'',
				groupDetailsMsg:{},
				group_msg:{},
				groupState:"",
				groupMember:[],
				options:'',
				store_info:'',
			}
		},
		filters: {
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
			// 时间戳转换
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			}
		},
		onLoad(option) {
			this.options = option
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.groupDetailsMsg = uni.getStorageSync('groupMsh')
			console.log(this.groupDetailsMsg)
			this.group_msg = uni.getStorageSync('checkMember')
			console.log(this.group_msg)
			if(option.group_status == 'on'){
				this.groupState = '拼团中'
			}else if(option.group_status == 'finish'){
				this.groupState = '拼团完成'
			}else{
				this.groupState = '拼团失败'
			}
		},
		onShow() {
			this.memberDetail()
			this.getUserinfo()
		},
		// #ifdef MP-WEIXIN
			onShareAppMessage(res) {
				let act_msg = uni.getStorageSync('actPerfor')
				let _self = this
				return {
					title: _self.store_info.nickname + '邀请您加入' + act_msg.name + '活动并参与拼团', // 分享描述
					path: '/pages/home/organization/activeDetail-Group-3?store_id='+_self.store_id + 
					'&actId=' + act_msg.activity_id + '&customer_id=' + _self.store_info.customer_id + 
					'&page=share&order_id=' + _self.group_msg.order_id,
					imageUrl: act_msg.image[0].image, // 分享图标
				}
			},
		// #endif
		methods:{
			getUserinfo(){
				const _self = this
				const data = {
					customer_store_id:this.store_id
				}
				
				this.$api.getCustomerInfo(data).then(res => {
					_self.store_info = res.data.userinfo
				}).catch( err => {
					console.log(err)
				})
			},
			getStore(){
							
				const _self = this
				const act_msg = uni.getStorageSync('actPerfor')
				const data = {
					customer_store_id:this.store_id
				}
				
				this.$api.getCustomerInfo(data).then(res => {
					
					if(!res.status){
						return false
					}
					// console.log(res.data,'store res.data')
					// return false
					
					const store_info = res.data.userinfo
					// 进行签名的时候  Android 不用使用之前的链接， ios 需要
					let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
					let data = {
						token:_self.$store.getters.getToken,
						url:signLink
					}
					
					this.$api.gain_share_data(data).then( res => {
						const shareConfig = JSON.parse(res.data)
						this.$refs.shareTip.open()
						console.log(shareConfig,'share res.data')
						
						wx.config(shareConfig)
						wx.ready(function(){
							
							wx.checkJsApi({
								jsApiList: [
									'updateTimelineShareData',
									'updateAppMessageShareData',
									'onMenuShareAppMessage',
									'onMenuShareTimeline'
								],
								success: function(res) {
									console.log('接口检测成功:'+res);
								},
								error: function(err) {
									console.log('接口检测失败:'+err);
								}
							})
							
							const shareData = { 
								title: act_msg.name, // 分享标题
								desc:  store_info.nickname + '邀请您加入' + act_msg.name + '活动并参与拼团', // 分享描述
								link: _self.current_url()+'/pages/home/organization/activeDetail-Group-3?store_id='+_self.store_id + '&actId=' + act_msg.activity_id + '&customer_id=' + store_info.customer_id + '&page=share&order_id=' + _self.group_msg.order_id,
								imgUrl: act_msg.image[0].image, // 分享图标
								success: function (res) {
								  console.log(res,'success ---')
								},
								fail:function(err){
									console.log(err.errMsg,'fail ---')
								}
							}
							wx.updateAppMessageShareData(shareData);
							wx.updateTimelineShareData(shareData);
						})
						wx.error(function(res){
							console.log(res,'wx.error')
						})					
					}).catch( err => {
						
						console.log(err)
					})
					
				}).catch( err => {
					console.log(err)
				})
				
				
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			memberDetail(){
				let data = {
					token:this.$store.getters.getToken,
					assemble_id:this.group_msg.assemble_id
				}
				this.$api.group_member(data).then(res => {
					console.log(res)
					if(res.status){
						this.groupMember = res.res
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.popup_box_de{
		width: 100%;
		height: 100%;
	}
	.popup_box_close{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	page{
		background: #F3F3F4;
	}
	.group-state-content{
		width: 100%;
		padding: 20upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.group-state-msg{
		display: flex;
		justify-content: space-between;
	}
	.group-state-msg-left{
		display: flex;
	}
	.group-state-msg-left>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.group-state-msg-left>view,.group-state-msg-left>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.group-state-msg-left>view{
		position: relative;
	}
	.group-state-msg-left>view>view{
		width: 66upx;
		height: 28upx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28upx;
		border-radius: 14upx 14upx 14upx 0;
		background: #FF8B46;
		font-size: 22upx;
		position: absolute;
		top: -10upx;
		right: -48upx;
	}
	.group-state-msg-right{
		color: #666666;
		font-size: 24upx;
		line-height: 80upx;
	}
	.group-state-msg-right>text{
		color: #333333;
	}
	.group-state-details{
		width: 100%;
		height: 204upx;
		background: #F4F5F9;
		margin-top: 30upx;
		padding:  0 20upx;
		box-sizing: border-box;
	}
	.group-state-details-top{
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-state-title-details{
		color: #333333;
		font-size: 30upx;
	}
	.group-state-details-top>view:last-child{
		display: flex;
	}
	.group-state-details-top>view:last-child{
		color: #FF8B46;
		font-size: 30upx;
	}
	.group-state-details-top>view>image{
		width: 12upx;
		height: 20upx;
		margin-top: 16upx;
	}
	.group-state-details-bottom{
		display: flex;
		justify-content: space-around;
		margin-top: 28upx;
		text-align: center;
	}
	.course-statistics-details{
		position: relative;
	}
	.lack{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 14upx 14upx 14upx 0;
		background: #FF391F;
		font-size: 22upx;
		position: absolute;
		top: -14upx;left: 100upx;
	}
	.course-statistics-details>view:first-child{
		color: #333333;
		font-size: 36upx;
	}
	.course-statistics-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.course-statistics-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #DEDEDE;
		margin-top: 20upx;
	}
	.group-state-invite{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 52upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-course-content{
		width: 100%;
		padding: 22upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.act-course-phone{
		display: flex;
		justify-content: space-between;
	}
	.act-course-phone>view:first-child{
		color: #666666;
		font-size: 28upx;
		margin-left: 100upx;
		line-height: 40upx;
	}
	.act-course-phone>view:last-child{
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-course-details{
		margin-top: 40upx;
	}
	.act-course-details-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		padding: 0 28upx 0 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
	}
	.act-course-details-title>text{
		display: inline-block;
		color:#666666;
		font-size: 24upx;
	}
	.act-course-details-title>text:nth-child(2){
		margin-left: 240upx;
	}
	.act-course-details-title>text:nth-child(3){
		margin-left: 76upx;
	}
	.act-course-details-title>text:nth-child(4){
		margin-left:86upx;
	}
	.act-course-details-common,.give-content-details{
		width: 100%;
		padding: 20upx 0 18upx;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.act-course-details-common text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
	}
	.act-course-details-common>text:nth-child(1){
		width: 284upx;
		font-size: 24upx;
	}
	.act-course-details-common>text:nth-child(3){
		color: #FF391F;
		margin-left: 25upx;
	}
	.give-content{
		margin-top: 30upx;
	}
	.give-content-details>text{
		color: #FF391F;
		font-size: 24upx;
	}
	.act-course-salesman{
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;
	}
	.act-course-salesman-img{
		display: flex;
	}
	.act-course-salesman-img>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.act-course-salesman-img>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.act-course-salesman-img>view{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		border: 1upx solid #FF8B46;
		font-size: 22upx;
		margin-top: 24upx;
		margin-left: 10upx;
	}
	.group-bad{
		margin-top: 30upx;
		color: #FF391F;
		font-size: 24upx;
	}
	.adjust-succed{
		line-height: 44upx;
		color: #FE8846;
		font-size: 24upx;
		text-align: center;
		width: 200upx;
		height: 44upx;
		border: 2upx solid #FE8846;
		margin-top: 20upx;
	}
</style>
